<!-- 功能管理页面 -->
<script setup lang="ts">
import {reactive, ref, computed} from 'vue'
import dDialog from '@/components/dDialog/dDialog.vue'
import dFrom from '@/components/dFrom/dFrom.vue'
import {FromItem} from '@/components/dFrom/dFrom'
import {ElMessage} from 'element-plus'
import {
  DictData,
  addDict,
  updateDictItem
} from '@/api/baseSetting/dictionaryManager'
import {Normal, Collect} from '@/util/common'
const emits = defineEmits(['cancel', 'confirm', 'close'])
const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  popData: {
    type: Object,
    required: true
  }
})
//表单清除控制
const resetFieldsFlag = ref(false)

// 表单清除
const validateFlag = ref(false)

const formData = computed(() => {
  return props.popData
})
// 弹窗验证数据
const rules = reactive({
  dictCode: [
    {required: true, message: '请输入字典编码', trigger: ['change', 'blur']},
    {
      required: false,
      message: '请输入字母、数字、符号',
      pattern: Collect,
      trigger: ['change', 'blur']
    },
    {
      required: false,
      message: '长度应小于50个字符',
      max: 50,
      trigger: ['change', 'blur']
    }
  ],
  dictName: [
    {required: true, message: '请输入字典名称', trigger: ['change', 'blur']},
    {
      required: false,
      message: '长度应小于50个字符',
      max: 50,
      trigger: ['change', 'blur']
    },
    {
      required: false,
      message: '请输入汉字、字母、数字、特殊符号',
      pattern: Normal,
      trigger: ['change', 'blur']
    }
  ]
})
// 弹窗表单数据
const fromItems = ref<Array<FromItem>>([
  {
    label: '类型名称',
    prop: 'name',
    placeholder: '请输入类型名称',
    type: 'input',
    enterSubmit: false
  },
  {
    label: '类别级别',
    prop: 'pid',
    placeholder: '请输入类别级别',
    type: 'input',
    enterSubmit: false
  }
])

// 新增接口
const ifAddDict = () => {
  addDict(formData.value).then((res) => {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
    emits('confirm')

  })
}

// 编辑接口
const ifUpdateDictItem = () => {
  updateDictItem(formData.value as any).then((res) => {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
    emits('confirm')

  })
}

const onPopSubmit = () => {
  // formData.value.typeCode =
  // formData.value.dictType = formData.value.dictIndex
  if (formData.value.id) {
    ifUpdateDictItem()
  } else {
    ifAddDict()
  }
}

// 弹窗取消
const onCancel = () => {
  emits('cancel')
}

// 弹窗关闭
const onClose = () => {
  resetFieldsFlag.value = !resetFieldsFlag.value
  emits('close')
}

// 弹窗保存
const onConfirm = () => {
  validateFlag.value = !validateFlag.value
}
</script>

<template>
  <d-dialog
    :title="formData.id ? '编辑类别' : '新增类别'"
    :show-dialog="showDialog"
    custom-class="small"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <d-from
      :reset-fields-flag="resetFieldsFlag"
      :validate-flag="validateFlag"
      label-position="right"
      :label-width="100"
      :rules="rules"
      :form-data="formData"
      :form-items="fromItems"
      :form-line-num="1"
      @submit="onPopSubmit"
    />
  </d-dialog>
</template>

<style scoped lang="less"></style>
<style>
.small{
  width: 600px;
}
</style>